<template>
  <div class="check-page">
    <checkheader title="我的账本" @fatherMethod="fatherMethod"></checkheader>
    <div class="muicontent">
      <div class="check-search">
        <router-link to="/BrandChoseFilter" class="search search-left">搜索品牌</router-link>
        <router-link to="/timeSearch" class="search search-right">搜索起止时间</router-link>
      </div>
      <ul
        class="check-ul"
        v-for="(item,index) in data"
        :key="index"
        @click.prevent="toDetails(item.accountBookId)"
      >
        <li class="check-content">
          <p class="content-title">
            <span>{{item.itemName}}</span>
          </p>
          <div class="content-div">
            <ul class="content-table">
              <li>
                <span>收包时间</span>
                <span>{{item.collectionTime ? item.collectionTime : '--'}}</span>
              </li>
              <li>
                <span>卖包时间</span>
                <span>{{item.sellOutTime ? item.sellOutTime : '--'}}</span>
              </li>

              <li>
                <span>持有时间</span>
                <span>{{item.holdingTime||item.holdingTime===0 ? item.holdingTime+'天' : '--'}}</span>
              </li>
            </ul>
            <ul class="content-table">
              <li>
                <span>收包价</span>
                <span>
                  <i class="font-color">{{item.collectionPrice ? "￥"+item.collectionPrice : '--'}}</i>
                </span>
              </li>
              <li>
                <span>卖包价</span>
                <span>
                  <i class="font-color">{{item.sellOutPrice ?"￥"+ item.sellOutPrice : '--'}}</i>
                </span>
                <span class="btn" v-if="!item.sellOutTime || !item.sellOutPrice" @click.stop="toSellTime(item)">修改</span>
              </li>

              <li>
                <span>利润率</span>
                <span>
                  <i class="font-color">{{item.profit ? item.profit+"%" : '--'}}</i>
                </span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import checkheader from './checkHeader'
export default {
  name: 'mycheck',
  data () {
    return {
      data: []
    }
  },
  methods: {
    fatherMethod () {
      // 返回home组件
      this.$store.commit('setBrandId', '')
      this.$router.push({ name: 'Home' })
    },
    toDetails (index) {
      // 进入详情页面
      this.$router.push({ name: 'checkDetails', query: { goodsId: index } })
    },
    toSellTime (param) {
      // 进入修改页面
      this.$router.push({ name: 'selltime', query: { goodsId: param.accountBookId, startTime: param.collectionTime } })
    },
    loadList () {
      this.$http.post(`${this.baseUrl.findAccountBookList}`,
        { brandId: this.$route.query.keyId || this.$store.state.brandId,
          username: this.$store.state.username,
          startTime: this.$route.query.datetime,
          endTime: this.$route.query.datetime1 }).then((res) => {
        if (res.data.code === 200) {
          this.data = res.data.data
        }
      })
    }
  },
  components: {
    checkheader
  },
  mounted () {
    this.loadList()
  }
}
</script>

<style lang="stylus" scoped>
.check-page {
  .muicontent {
    position: absolute;
    top: 0.9rem;
    bottom: 0rem;
    left: 0;
    right: 0;
    overflow-y: auto;

    .check-search {
      width: 100%;
      height: 0.76rem;
      line-height: 0.76rem;
      display: flex;
      flex: 1;
      background-color: $color-search;
      margin-bottom: 0.05rem;

      .search {
        width: 50%;
        text-align: center;
        color: $color-search-text;
        font-size: 0.26rem;
      }

      .search-left {
        border-right: 0.01rem solid $color-search-border;
      }
    }

    .check-ul {
      width: 100%;

      .check-content {
        padding: 0.25rem 0rem 0rem 0.4rem;
        border-bottom: 0.01rem solid $color-content-border;

        .content-title {
          font-size: 0.3rem;
          color: $color-text;
          font-weight: 700;
          margin-bottom: 0.4rem;
        }

        .content-div {
          display: flex;
          flex: 1;

          .content-table {
            width: 50%;

            li {
              width: 100%;
              padding-bottom: 0.4rem;
              line-height:0.3rem;
              span {
                display: inline-block;
                font-size: 0.24rem;
                text-align: left;

                &:nth-child(1) {
                  color: $color-content-text;
                  padding-right: 0.1rem;
                }

                &:nth-of-type(2) {
                  color: $color-text;
                  width: 1.5rem;
                }

                .font-color {
                  font-size: 0.28rem;
                  color: $color;
                }
              }

              .btn {
                display: inline-block;
                width: 0.8rem;
                // height: 0.5rem;
                border: 0.1px solid $color;
                color: $color;
                text-align: center;
                // line-height: 0.5rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
